import { t } from 'i18next'
import React, { forwardRef, useImperativeHandle, useEffect, useState } from 'react'
import { Select } from '@kedacom/react-next'
import ColorPicker from '@/components/ColorPicker'
import { StyledFontSetting } from './style'
const sizeOptions = [
	{ label: t('小'), value: 0 },
	{ label: t('中'), value: 1 },
	{ label: t('大'), value: 2 },
]
const positionOptions = [
	{ label: t('左上角'), value: 0 },
	{ label: t('左下角'), value: 1 },
	{ label: t('右上角'), value: 2 },
	{ label: t('右下角'), value: 3 },
	{ label: t('底部中间'), value: 4 },
]
export interface FontSettingProps {
	disabled: boolean
	showText?: boolean //用于会控画面合成
	size?: number
	position?: number
	fontColor?: string
	/** 容器 */
	container?: HTMLDivElement | null
	changeCb?: (type: string, val: any) => void
}
export interface FontSettingRef {
	getValue: () => {
		size: number
		position: number
		fontColor: string
	}
}
const FontSetting = forwardRef((props: FontSettingProps, ref: React.Ref<FontSettingRef>) => {
	const { disabled, showText, size = 1, position = 1, container, fontColor = '#FFFFFF', changeCb } = props
	const [isFontSettingShow, setIsFontSettingShow] = useState(false) //字体设置
	const [innerSize, setInnerSize] = useState(size) //字体大小 0-小1-中2-大
	const [innerPosition, setInnerPosition] = useState(position) //字体位置 0-左上角 1-左下角 2-右上角 3-右下角 4-底部中间
	const [innerFontColor, setInnerFontColor] = useState(fontColor) //字体颜色
	useEffect(() => {
		setInnerSize(size)
	}, [size])
	useEffect(() => {
		setInnerPosition(position)
	}, [position])
	useEffect(() => {
		setInnerFontColor(fontColor)
	}, [fontColor])
	useImperativeHandle(ref, () => ({
		getValue() {
			return {
				size: innerSize,
				position: innerPosition,
				fontColor: innerFontColor,
			}
		},
	}))
	return (
		<StyledFontSetting className="font-setting">
			{isFontSettingShow && (
				<div className="more-setting">
					<Select
						container={container !== undefined ? () => container : container}
						className="size-select"
						options={sizeOptions}
						value={innerSize}
						width={60}
						disabled={disabled}
						onChange={(e, val) => {
							setInnerSize(val)
							changeCb?.('size', val)
						}}
					/>
					<Select
						container={container !== undefined ? () => container : container}
						className="position-select create-vmp-position__i18n"
						options={positionOptions}
						value={innerPosition}
						width={70}
						disabled={disabled}
						onChange={(e, val) => {
							setInnerPosition(val)
							changeCb?.('position', val)
						}}
						panelClassName="create-vmp-position-panel__i18n"
					/>
					<span className="color-block" style={{ background: innerFontColor }} />
					<ColorPicker
						container={container}
						value={innerFontColor}
						onChange={(val) => {
							setInnerFontColor(val)
							changeCb?.('color', val)
						}}
						disabled={disabled}
					/>
				</div>
			)}
			<span
				className={`${disabled ? 'disabled' : ''} font-btn`}
				onClick={() => {
					!disabled && setIsFontSettingShow(!isFontSettingShow)
				}}
			>
				{isFontSettingShow ? '<' : ''}
				{t('字体设置')}
				{isFontSettingShow ? '' : '>'}
			</span>
		</StyledFontSetting>
	)
})
export default FontSetting
